export class DebugGpuPanel {
  constructor(manager) {
    this.manager = manager;
    this.dom = document.createElement('div');
    Object.assign(this.dom.style, {
      position: 'absolute',
      left: '10px',
      top: '10px',
      color: '#0f0',
      background: 'rgba(0,0,0,0.4)',
      padding: '6px',
      font: '12px monospace',
      zIndex: 10000,
      whiteSpace: 'pre',
    });
    document.body.appendChild(this.dom);
  }

  update() {
    const s = this.manager.getStats();
    const fmt = (b) => (b / 1024 / 1024).toFixed(1) + ' MB';
    this.dom.textContent =
      `[GPU Memory]\n` +
      `Textures:  ${fmt(s.textureBytes)} / ${fmt(this.manager.limits.textureBytes)}\n` +
      `Buffers:   ${fmt(s.bufferBytes)} / ${fmt(this.manager.limits.bufferBytes)}\n` +
      `FBOs:      ${fmt(s.framebufferBytes)} / ${fmt(this.manager.limits.framebufferBytes)}\n` +
      `Total:     ${fmt(s.totalBytes)}\n` +
      `Resources: ${s.count}`;
  }
}